pub mod func_t {
    use yew::{function_component, html, Properties};


    // Component props as the standard component statement
    #[derive(Properties, PartialEq)]
    pub struct RenderedAtProps {
        pub time: String
    }

    // function component with props
    // only add incoming props
    #[function_component(RenderedAt)]
    pub fn rendered_at(props: &RenderedAtProps) -> Html {
        html! {
            <p>
                <b>{"Rendered at: "}</b>
                {&props.time}
            </p>
        }
    }


    // function component with no props
    use yew::{use_state, Callback};
    #[function_component(CounterFun)]
    pub fn CounterFunComp() -> Html {
        // use_state hook
        let counter = use_state(|| 0);
        // onclick event
        let onclick = {
            let counter= counter.clone();
            Callback::from(move |_| counter.set(*counter + 1))
        };
        html!{
            <div>
                <button {onclick}>{"add value"}</button>
                <p>
                    <b>{"cur value: "}</b>
                    {*counter}
                </p>
            </div>
        }
    }

    use std::fmt::Display;

    //
    // generic function show
    //
    // generic function component props
    #[derive(Properties, PartialEq)]
    pub struct GenProps<T> 
    where
        T: PartialEq
    {
        pub data: T,
        pub type_data: String,
    }

    // generic function component 
    #[function_component(GenComp)]
    pub fn gen_comp<T>(props: &GenProps<T>) -> Html
    where
        T: PartialEq + Display
    {
        html!{
            <p>
                {format!("type: {}, data: {}", &props.type_data ,&props.data)}
            </p>
        }
    }
}